<template>
  <div class="chartBox" :id="id"></div>
</template>
<script setup name="BarChart">
import * as echarts from "echarts"
import { defineProps, onMounted } from 'vue';
import Colors from "@/config/Colors";
const props = defineProps({
  id: {
    type: String,
    required: true,
    default: 'barChart'
  },
  type: {
    type: String,
    default: 'vertical' // 可选值：vertical、horizontal
  },
  option: {
    type: Object,
    default: () => {
      return {}
    }
  }
})
let option = {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
  grid: {
    left: "5%",
    right: "5%",
    top: "15%",
    bottom: 0,
    containLabel: true,
  },
  legend: {
    show: false,
    data: [],
    type: 'scroll', // 开启滚动模式
    orient: 'horizontal', // 水平排列图例
    top: '5%', // 设置图例距离顶部的距离
    left: 'center', // 设置图例居中显示
    pageButtonItemSize: 16, // 设置分页按钮的大小
    pageButtonPosition: 'end', // 分页按钮显示的位置
    pageButtonGap: 10, // 分页按钮的间距
  },
  textStyle: {
    color: "#128075"
  },
  series: [
    {
      name: '',
      data: [],
      type: 'bar',
      itemStyle: {
        normal: {
          color: function (params) {
            let colorList = Colors;
            let colorItem = colorList[params.dataIndex];
            return colorItem;
          }
        }
      },
      label:{
        show:true,
        position:'top',
        formatter:function(data){
          return data.value
        }
      }
    }
  ],
};

onMounted(() => {
  if(props.type === 'vertical') {
    option.xAxis = {
      type: 'category',
      data: [],
      axisLabel: {
        interval: 0,
        color: "#128075",
        rotate:30,
        fontSize:10,
        formatter: function (value) {
          if(value.length > 5) {
            return value.substring(0, 5) + '...';
          } else {
            return value;
          }
        },
      },
      axisPointer: {
        type: 'shadow' // 使用阴影指示器
      },
      axisTick: {
        alignWithLabel: true // 刻度线和标签对齐
      },
      axisLine: {
        onZero: true // 轴线和0刻度线对齐
      },
      scrollbar: {
        show: true // 启用滚动条
      }
    }
    option.yAxis = {
      boundaryGap: [0, '10%'],
      type: 'value',
      minInterval : 1,
      axisLabel: {
        formatter: '{value}'
      },
      data: []
    }
  } else if(props.type === 'horizontal') {
    option.xAxis = {
      type: 'value',
      boundaryGap: [0, 0.01]
    }
    option.yAxis = {
      type: 'category',
      data: []
    }
  }
  let options = replaceObjectValues(option, props.option);
  if(props.type === 'vertical') {
    if (options.xAxis.data && options.xAxis.data > 15) {
      options.grid.bottom = 20;
      options.dataZoom = [{
        type: 'slider', // 使用滑动条形式的 dataZoom 组件
        start: 0,       // 左侧在数据窗口范围的起始百分比, 0 表示从头开始
        end: 30,         // 右侧在数据窗口范围的结束百分比, 100 表示到尾部结束
        height: 20,
        bottom: 0
      }]
    }
  }
  initChart(options)
})
function initChart(options) {
  let chart = echarts.init(
      document.getElementById(props.id),
      "chalk"
  );
  // 监听屏幕变化自动缩放图表
  let chartMain = document.querySelector('.chartBox')
  new ResizeObserver(entries => {
    chart.resize();
  }).observe(chartMain);
  chartMain.addEventListener("resize", function () {
    chart.resize();
  })


  chart.setOption(options);
}
/**
 * 深度递归替换对象中的属性值
 * @param {Object} target - 原始对象
 * @param {Object} replacement - 用于替换的对象
 */
function replaceObjectValues(target, replacement) {
  if (Array.isArray(target) && Array.isArray(replacement)) {
    // 如果 target 和 replacement 都是数组，直接覆盖整个数组
    for (let i = 0; i < replacement.length; i++) {
      if (i < target.length && typeof target[i] === "object" && target[i] !== null) {
        // 如果数组项是对象，递归处理
        replaceObjectValues(target[i], replacement[i]);
      } else {
        // 如果不是对象或索引超出范围，直接替换
        target[i] = replacement[i];
      }
    }
    // 如果 replacement 数组比 target 长，追加新项
    if (replacement.length > target.length) {
      target.splice(target.length, 0, ...replacement.slice(target.length));
    }
  } else if (typeof target === "object" && target !== null && typeof replacement === "object" && replacement !== null) {
    for (let key in replacement) {
      if (replacement.hasOwnProperty(key)) {
        if (key in target) {
          if (typeof target[key] === "object" && target[key] !== null) {
            // 如果值是对象或数组，递归处理
            replaceObjectValues(target[key], replacement[key]);
          } else {
            // 如果是普通值，直接替换
            target[key] = replacement[key];
          }
        }
      }
    }
  }
  return target;
}
</script>
<style lang="scss" scoped>
.chartBox{
  width: 100%;
  height: 100%;
}
</style>